import { useState, useEffect } from 'react'
import MyNavbar from '../components/MyNavbar'
import api from '../../axios/api'
import { InfiniteScroll, List, SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { ProductCard } from 'react-vant';
function Index() {
    const navigate = useNavigate()
    const [homeList, setHomeList] = useState([])
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const getData = async () => {
        const res = await api.get('/api/list', { params: { page } })
        const { data } = res.data
        setHomeList((prev) => [...prev, ...data])
        setPage((prev) => prev + 1)
        if (data.length == 0) {
            setHasMore(false)
        }
    }
    useEffect(() => {
        getData()
    }, [])
    const handelSearch = async (value) => {
        if (value !== "") {
            const res = await api.get("/api/list", {
                params: { page: 1, wd: value },
            });
            console.log(res);

            const { data } = res.data;
            setHomeList(data);
        } else {
            setHomeList([]);
            setPage(1);
        }
    }
    const detail = (id) => {
        navigate(`/detail/${id}`)
    }
    return (
        <div>
            <MyNavbar title='首页' />
            <SearchBar placeholder='请输入内容' onChange={handelSearch} />
            {homeList.map((item, ind) => (
         


                <List key={ind} style={{ display: 'flex' }}>
                    <List.Item onClick={() => detail(item.id)}> <img style={{ width: '20vw' }} src={item.image} alt="" /> {item.title}</List.Item>
                </List>

            ))}
            <InfiniteScroll loadMore={getData} hasMore={hasMore} />
        </div>
    )
}

export default Index
